<template>
	<view class="wordCard" >
		<view class="contentBox">
			<view class="wordBox">
				<view class="word">{{localWordData.word}}</view>
				<view class="wordSymbol">{{localWordData.symbol}}</view>
			</view>
			<view class="exampleBox">
				<h6 class="title">例句</h6>
				<p class="example exampleEn"><rich-text :nodes="localWordData.example_en"></rich-text></p>
				<p class="example exampleZh">{{localWordData.example_zh}}</p>
			</view>
			<view class="diffrentContent">
				<view class="wordTranslate" v-if="localWordData.translate != ''">
					{{localWordData.translate}}
				</view>
				<view class="choices" v-if="localWordData.choices.length!=0" ref="choices">
					<li class="choice" v-for="(choice,index) in localWordData.choices" :key="index"
						@click="choiceWord(index)">
						{{choice}}
					</li>
				</view>
			</view>
			<view class="checkWordInfo">
				<view v-if="localWordData.choices.length==0">
					点击此处查看详细释义
				</view>
				<view v-if="localWordData.choices.length!=0">
					不认识 ->
				</view>
			</view>
		</view>
		<!--  -->
	<!-- 	<view class="btnBox" v-if="localWordData.isShowBtn">
			<span class="btn" v-for="btn,i in btns" :key="i" @click="btnClick(i)">
				{{btn}}
			</span>
		</view> -->
	</view>
</template>

<script>
	export default {
		name: "word-card",
		props: {
			wordData: {
				type: Object,
				default: {},
				require: true
			}
		},
		data() {
			return {
				localWordData: {
					word: "abandon", // 单词
					symbol: "[əˈbændən]", // 音标
					example_en: "The scheme's investors decided to abandon the project.", // 例句
					example_zh: "项目投资者决定放弃该工程。", // 例句
					choices: [],
					// choices: [
					// 	"n. 议题,问题,期刊号;一次发行额,发行,子女",
					// 	"n. 议题,问题,期刊号;一次发行额,发行,子女",
					// 	"n. 议题,问题,期刊号;一次发行额,发行,子女",
					// 	"n. 议题,问题,期刊号;一次发行额,发行,子女",
					// ], // 选择题 
					translate: "v. 遗弃丢弃\nn. 放任,放纵", // 翻译
					isShowBtn: true, // 是否显示下方按钮
				}, // 子组件数据 可以修改
				btns: ["不认识", "模糊", "认识"],
				isShowInfo:false,
			}
		},
		created() {
			this.localWordData = this.$props.wordData
			this.localWordData.example_en = this.handlerExmple(this.localWordData.example_en, this.localWordData.word)
		},
		methods: {
			openWordInfo(){
				let id = this.localWordData.id
				this.isShowInfo = true
				
			},
			choiceWord(i) {
				// TODO: 选择单词后的正确或错误的样式
			},
			// 给例句中的单词添加高亮样式
			handlerExmple(str, word) {
				return str.replace(word, `<span class="highligt">${word}</span>`)
			},
			btnClick(i) {
				switch (i) {
					case 0:
						console.log("不认识")
						break
					case 1:
						console.log("模糊")
						break
					case 2:
						console.log("认识")
						break
					default:
						break
				}
			}
		}
	}
</script>

<style>
	.wordCard {
		position: relative;
		width: 18.75rem;
		height: 39.57rem;
		border-radius: 0.63rem;
		margin: 0 auto;
	}

	.contentBox {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 18.75rem;
		height: 36.57rem;
		border-radius: 0.63rem;
		background-color: rgba(255, 255, 255, 1);
		font-size: 0.88rem;
		font-family: -apple-system;
		padding-top: 3rem;
	}
		

	.wordBox .word {
		color: rgba(16, 16, 16, 1);
		font-size: 1.75rem;
		text-align: center;
		font-family: PingFangSC-regular;
	}

	.wordBox .wordSymbol {
		color: rgba(125, 119, 119, 1);
		font-size: 0.88rem;
		text-align: center;
		font-family: PingFangSC-regular;
	}

	.exampleBox {
		width: 13.13rem;
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
		font-style: italic;
		margin-top: 2rem;
		margin-bottom: 3rem;
	}

	.exampleBox .title {
		color: rgba(125, 119, 119, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.example {
		margin: 0.3rem 0;
	}

	.exampleZh {
		color: #948f8f;
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.wordTranslate {
		white-space: pre-wrap;
	}

	.choice {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 14.75rem;
		height: 2.94rem;
		line-height: 1.25rem;
		border-radius: 0.31rem;
		background-color: rgba(238, 238, 238, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		font-family: -apple-system;
		border: 0.06rem solid rgba(224, 224, 224, 1);
		margin: 1rem 0;
		padding: 0 1rem;
	}

	.checkWordInfo {
		position: absolute;
		text-align: center;
		bottom: 1rem;


	}

	.btnBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 18.75rem;
		height: 2.69rem;
		border-radius: 0rem 0rem 0.63rem 0.63rem;
		background-color: var(--background--color);

	}

	.btnBox .btn {
		flex: 1;
		border-radius: 0.25rem;
		color: #8f8f8f;
		font-size: 1rem;
		text-align: center;
		font-family: PingFang SC;
	}

	.choiceCorrect {}

	.choiceError {}

	.highligt {
		color: #2f93df !important;
	}
</style>